<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        html,body{
            padding: 0px;
            margin: 0px;
        }
        #move_div{
            position: fixed;
            top: 200px;/*div的y轴*/
            left: 150px;/*div的x轴*/
            width: 300px;
            height: 200px;
            background-color: gray;
            /*z-index: 1000;*/
        }
        #move_box{
            position: fixed;
            top: 200px;/*div的y轴*/
            left: 150px;/*div的x轴*/
            width: 300px;
            height: 200px;
            background-color: rgba(0,0,0,0);
            border: 1px solid #666;
            z-index: 100000;
        }
        #move_box:hover{
            cursor: move;
        }

        .super-top-right{
            position: fixed;
            z-index: 10000;
            background-color: #e1e1e1;
            width: 1920px;
            height: 1080px;
            left: 300px;
        }
        .super-top-bottom{
            position: fixed;
            z-index: 100001;
            background-color: #e1e1e1;
            width: 1920px;
            height: 1080px;
            top: 480px;
            left: 0px;
        }
        .top{
            z-index: 10000000;
            position: absolute;
        }
        .bottom{
            position: absolute;
        }
    </style>

</head>
<body>

<div class="super-top" >
    <div class="super-top-right"></div>
    <div class="super-top-bottom"></div>
</div>
<img class="top"  src="images/iPhone6-1.png" alt="" >
<img class="bottom" src="images/iPhone6-2.png" alt="">

<div id="move_box" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div>
<div id="move_div"></div>

<script>

  /*
   * 分析：
   * 获取鼠标实时移动的坐标；m_move_x,m_move_y
   * 鼠标按下时的坐标；m_down_x,m_down_y
   * div的坐标；dx,dy
   * 鼠标按下时，鼠标与div的偏移量；md_x,md_y
   * div的新坐标；ndx,ndy
   */

  var isDown = false;//记录鼠标状态
  var move_div ;//要操作的div对象
  var move_box;
  var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;

  //鼠标按下
  function down(){
    isDown = true;

    //获取鼠标按下时坐标
    m_down_x = event.pageX;
    m_down_y = event.pageY;

    //获取div坐标
    dx = move_div.offsetLeft;
    dy = move_div.offsetTop;

    //获取鼠标与div偏移量
    md_x = m_down_x - dx;
    md_y = m_down_y - dy;
  }

  //鼠标移动
  function move(){
    move_div = document.getElementById("move_div");
    move_box = document.getElementById("move_box");

    //实时更新div的坐标
    dx = move_div.offsetLeft;
    dy = move_div.offsetTop;

    //获取鼠标移动实时坐标
    m_move_x = event.pageX;
    m_move_y = event.pageY;

    //鼠标按下时移动才触发
    if(isDown){

      //获取新div坐标，鼠标实时坐标 - 鼠标与div的偏移量
      ndx = m_move_x - md_x;
      ndy = m_move_y - md_y;

      //把新div坐标值赋给div对象
      move_div.style.left = ndx+"px";
      move_div.style.top = ndy+"px";
      move_box.style.left = ndx+"px";
      move_box.style.top = ndy+"px";

    }

  }

  //鼠标释放
  function up(){
    isDown = false;
  }


</script>
</body>
</html>